<template>
    <div class="detailBox">
        <van-nav-bar title="详情" left-text="返回" left-arrow @click-left="onClickLeft" />

        <div class="detail">
            <div class="park">
                <span class="parkName">{{parkDetail.parkName}}</span>
                <span class="open" v-if="parkDetail.open=='Y'">开放</span>
                <span class="distance">距离:{{parkDetail.distance}}km</span>
            </div>
            <div class="detail_address">
                <div class="address">详细地址: {{parkDetail.address}}</div>
                <div class="price">
                    <span>单价: <i>{{parkDetail.rates}}</i> 元/小时</span>
                    <span>封顶: <i>{{parkDetail.priceCaps}}</i> 元/天</span>
                </div>
            </div>
            <div class="remark">
                <van-field v-model="text" rows="2" autosize label="留言" type="textarea" maxlength="50"
                    placeholder="请输入留言" show-word-limit />
            </div>
        </div>
    </div>
</template>
<script>
import nav from "@/mixin/nav"
import { stopAddressDetail } from "@/service/stop/stopService";
export default {
    mixins: [nav],
    data() {
        return {
            parkDetail: {},
            text: "",
        }
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        }
    },
    async created() {
        let id = this.$route.params.id;
        console.log(id);
        let { data } = await stopAddressDetail(id);
        console.log(data);
        this.parkDetail = data.data;
    }
}

</script>
<style scoped lang="scss">
.detailBox {
    height: 100%;
    background-color: #EDEDED;
}

.detail_address {
    padding: 10px;
    margin: 30px 10px;
    border-radius: 10px;
    background-color: #fff;

    .price {
        margin-top: 30px;

        span {
            margin-right: 10px;
        }

        i {
            font-size: 20px;
            color: red;
        }
    }
}

.remark {
    padding: 10px;
    margin: 30px 10px;
    border-radius: 10px;
    background-color: #fff;

    textarea {
        resize: none;
        margin-top: 10px;
        border-radius: 10px;
        padding: 10px;
        border: none;
    }
}

.park {
    height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #fff;
    margin: 30px 10px;
    border-radius: 10px;


    .open {
        position: absolute;
        right: 100px;
        top: 50%;
        margin-top: -13px;
        padding: 5px;
        background-color: rgb(252, 94, 94);
        color: #fff;
        font-size: 10px;
        margin-left: 10px;
        border-radius: 15px;
    }

    .distance {
        position: absolute;
        margin-top: -10px;
        top: 50%;
        right: 10px;

    }
}
</style>